/**
 * JavaScript => Behavior
 * Css => Presentation
 * Html => Structual
 * 
 * HTML/CSS/JS各司其职
 * 应当避免不必要的由JS直接操作样式
 * 可以用class来表示状态
 * 纯展示类交互寻求零JS方案
 * 
 */

// 深夜食堂
// 写一段Is，控制一个网页，让已支持浅色和深色两种河览模式。如果是你来实现，你会怎么做？

// version 1
const btn1 = document.getElementById('modeBtn');
btn1.addEventListener('click', (e) => {
  const body = document.body;
  if (e.target.innerHTML === '🌛') {
    body.style.backgroundColor = 'black';
    body.style.color = 'white';
    e.target.innerHTML = '☀️';
  } else {
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌛';
  }
});

// version 2
const btn2 = document.getElementById('modeBtn');
btn2.addEventListener('click', (e) => {
  const body = document.body;
  if (body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

// 单一职责原则（Single Responsibility Principle, SRP）
// 版本一用js控制了css
// 版本二能直观看到功能  符合各司其职


 
